<template>
  <div class="reviewList">

    <el-form ref="form" :model="form" class="body">
      <el-form-item class="checkAllBox" label="" prop="isCheckAll" v-if="isEdit">
        <el-tooltip class="item" effect="dark" :content="$t('caseorder.anli81')" placement="top">
          <el-checkbox v-model="form.isCheckAll" @change="checkAllChange" :disabled="!isEdit">{{ $t('caseorder.anli81')
          }}</el-checkbox>
        </el-tooltip>
        
      </el-form-item>
      <el-form-item label="" prop="remarks">
        <div class="remarksBox">{{ $t('caseorder.yulan.yulan47') }}</div>
        <el-input type="textarea" show-word-limit :rows="4" maxlength="200" :placeholder="$t('caseorder.anli80')"
          v-model="form.remarks" :disabled="!isEdit">
        </el-input>
      </el-form-item>

      <el-form-item>
  
        <div class="items_item" v-for="(item, index) in form.items" :key="index">
          <el-row>
            <el-col :span="24">
              <h3>{{ item.dictLabel }}</h3>
            </el-col>
          </el-row>
          <el-row class="content_box">
            <el-col :span="18">
              <p class="items_item_content">{{ item.dictValue }}</p>
            </el-col>
            <el-col class="check_box" :span="6">
              <el-checkbox v-model="item.check" @change="checkChange" v-show="isEdit"></el-checkbox>
              <!-- <span class="qualified" v-show="item.check">{{ $t('caseorder.anli90') }}</span>
              <span class="unqualified" v-show="!item.check">{{ $t('caseorder.anli91') }}</span> -->
              <span class="situationBox" v-show="isReport">
                <span v-show="item.check">
                  <img src="@/assets/img/qualified_icon.png" alt="">
                  <span class="qualified">{{ $t('caseorder.anli90') }}</span>
                </span>
                <span v-show="!item.check" style="display: flex;align-items: center;">
                  <img src="@/assets/img/unqualified_icon.png" alt="">
                  <el-tooltip class="item" effect="dark" :content="$t('caseorder.anli91')" placement="top">
                    <span class="unqualified ellipsis" style="max-width: 80px;">{{ $t('caseorder.anli91') }}</span>
                  </el-tooltip>
             
                </span>
              </span>
            </el-col>
          </el-row>

          <el-row class="carousel_box" v-if="item.list && item.list.length > 0">
            <el-col :span="24">
              <el-carousel :autoplay="false" v-show="!isPreview" trigger="click" height="350px">
                <el-carousel-item v-for="(picItem, picIndex) in item.list" :key="picIndex">
                  <p v-show="isshowQualified" style="white-space: pre-wrap;word-wrap: break-word;" >{{ $t('caseorder.anli76') }}：{{ picItem.description }}</p>
                  <div style="text-align: center">
                    <img :src="picItem.picPath" alt="" />
                  </div>
                  <el-checkbox v-show="isEdit" class="delete_check" v-model="picItem.check"
                    @change="deleteCheckChange"></el-checkbox>
                </el-carousel-item>
              </el-carousel>

              <!-- 导出的时候不要轮播 -->
              <div v-show="isPreview">
                <div class="pic_item_box" v-for="(picItem, picIndex) in item.list" :key="picIndex">
                  <p v-show="isshowQualified">{{ picItem.description }}</p>
                  <img :src="picItem.picPath" style="height: 250px" alt="" />
                  <el-checkbox v-show="isEdit" class="delete_check" v-model="picItem.check"
                    @change="deleteCheckChange"></el-checkbox>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: '',

  data() {
    return {
      form: {

      },

    };
  },
  props: {
    // 传递的数据
    res_form: {
      type: Object,
    },
    // 控制是否是导出的状态（因为导出pdf的时候不能是轮播图）
    isPreview: {
      type: Boolean
    },
    // 控制是否是编辑状态
    isEdit: {
      type: Boolean
    },
    // 控制是否出现图片描述字样
    isshowQualified: {
      type: Boolean,
    },
    isReport: {
      type: Boolean,
    },

  },
  watch: {
    res_form: {
      handler() {
        this.initData();
      },
      deep: true, // 开启深度监听
    },

  },



  components: {},
  created() {

    this.initData();
  },
  methods: {
    initData() {
      this.form = this.res_form;
 

    },
    checkChange() {
      let count = 0;
      for (let i = 0; i < this.form.items.length; i++) {
        if (this.form.items[i]['check']) {
          count++;
        }
      }
      if (count === this.form.items.length) {
        this.form.isCheckAll = true;
      } else {
        this.form.isCheckAll = false;
      }
    },
    checkAllChange() {
      if (this.form.isCheckAll) {
        this.form.items.map(m => m['check'] = true);
      } else {
        this.form.items.map(m => m['check'] = false);
      }
    },
    deleteCheckChange() {


    }

  },
};
</script>

<style lang="scss" scoped>
.reviewList {
  ::v-deep .el-checkbox__inner {
    background-color: #cccccc;
    border-color: #cccccc;
  }

  ::v-deep .is-checked .el-checkbox__inner {

    background-color: #003e67;
    border-color: #003e67;
  }

  ::v-deep .el-checkbox__inner::after {
    transform: rotate(45deg) scaleY(1);
  }

  .checkAllBox {

    ::v-deep .el-checkbox {
      width: 120px;
      height: 50px;
      position: absolute;
      right: 0;
      top: -20px;
      display: flex;
      align-items: center;
    }
    ::v-deep .el-checkbox__label{
      width: 80px;
      white-space: nowrap;        /* 不换行 */
      overflow: hidden;           /* 超出部分隐藏 */
      text-overflow: ellipsis;    /* 超出部分显示省略号 */

      display: inline-block;
    }
  }



  .remarksBox {
    background: rgb(204 204 204 / 20%);
    border-radius: 10px 10px 0px 0px;

    height: 30px;
    line-height: 30px;
    padding-left: 15px;
  }

  .items_item {
    background: rgb(204 204 204 / 20%);
    padding: 10px;
    margin-bottom: 20px;
    border-left: 4px solid #003e67;

    ::v-deep .content_box {
      display: flex;
      align-items: center;

      .check_box {
        position: absolute;
        right: -10px;
        width: 120px;
        bottom: 50%;

        .situationBox {
          img {
            display: inline-block;
            width: 15px;
            height: 15px;
            margin-right: 10px;
            position: relative;
            top: -2px;
          }
        }

        >span {
          display: inline-block;
          margin-left: 15px;

        }

        .qualified {
          color: green;
        }

        .unqualified {
          color: red;
        }
      }

      .items_item_content {
        line-height: 20px;
        margin-bottom: 10px;
      }
    }

    .carousel_box {
      position: relative;

      .pic_item_box {
        position: relative;
      }

      img {
        width: 400px;
        height: 300px;
      }

      .delete_check {
        position: absolute;
        right: 37px;
        top: 0px;
      }

      ::v-deep .el-carousel__button {
        background: #003e67;
      }
      ::v-deep .el-carousel__item {
        overflow: auto;
      }
    }
  }

  ::v-deep .el-carousel__indicator--horizontal .el-carousel__button {
    width: 7px;
    height: 7px;
    background: #003e67;
    border: 1px solid #003e67;
    border-radius: 50%;
    opacity: 0.3;
  }

  ::v-deep .el-carousel__indicator--horizontal.is-active .el-carousel__button {
    width: 7px;
    height: 7px;
    background: #003e67;
    border-radius: 50%;
    opacity: 1;
  }

}</style>
